<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .wrap {
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        position: absolute;
        left: 100px;
        top: 100px;
    }

    .outer {
        width: 100px;
        height: 100px;
        background-color: pink;
    }

    .inner {
        width: 50px;
        height: 50px;
        background-color: green;
    }
</style>

<body>
    <!-- 点击一下盒子，在控制台输出一句话晏圳胃不好 -->
    <div class="wrap"></div>
    <button class="btn">解除事件绑定</button>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <a href="http://baidu.com">go 百度</a>
    <div class="thisNode">this</div>
    <script>
        console.log($('.wrap'));
        // jquery中绑定事件
        /*  $('.wrap').click(function () {
             console.log('晏圳胃不好');
         })
         $('.wrap').mousemove(function () {
             console.log('写写写')
         }) */
        // 标准写法
        /*  $('.wrap').on('click', function () {
             console.log('所以不能累到圳圳');
         }) */

        // 解绑事件
        $('.btn').click(function () {
            //  将wrap中的点击事件进行解绑
            console.log('1111')
            // 将wrap上的所有事件进行解绑
            // $('.wrap').off();
            // 解绑某个具体的事件
            $('.wrap').off('click');
        })

        $('.wrap').click(function (e) {
            // 事件对象
            console.log(e);
            // 事件坐标
            console.log('晏圳胃不好');
            // 鼠标点击时相对于事件元素左上角的距离
            console.log(e.offsetX, e.offsetY);
            // 针对视口左上角的距离
            console.log(e.clientX, e.clientY);
            // 相对于页面左上角的距离
            console.log(e.pageX, e.pageY);
        })

        $('.outer').click(function (e) {
            console.log('outer')
        })
        $('.inner').click(function (e) {
            // 阻止事件冒泡
            e.stopPropagation();
            console.log('inner')
        })

        // 阻止浏览器的默认
        $('a').click(function (e) {
            // 阻止浏览器的默认行为
            e.preventDefault();
        })
        /* this指向：
            1.在全局中指向window
            2.哪个对象调用指向哪个对象
            3.构造函数中创建时this指向当前实例对象
            4.箭头函数无this指向,指向它的外层函数
            5.call apply bind改变this指向
            6.严格模式下this不能指向window，是undefined（全局调用时）
            7.DOM事件中，谁调用this指向谁
        */
        $('.thisNode').click(function () {
            // 原生this
            console.log(this);
            // $(this)是jQuery对象
            console.log($(this));
        })
        /* this和$(this)一样吗？ */
    </script>
</body>

</html>